<template>
    <div refs="container" class="container"> 
        <div>
            <!-- hot -->
            <div class="hot">
                <div class="hot-title">
                    热门城市
                </div>
                <ul class="hot-list">
                    <li class="hot-item" v-for="item in hotCities" :key="item.id" @click="changeCityName(item.name)">
                        {{item.name}}
                    </li>
                </ul>
            </div>

            <!-- sort -->
            <div class="sort">
                <div class="sort-title">
                    字母排序
                </div>
                <ul class="sort-list">
                    <li class="sort-item" v-for="(item,key) in cities" :key="key" @click="changeSort(key)">
                        {{key}}
                    </li>
                </ul>
            </div>

            <!-- list -->
            <div class="list">
                <div v-for="(val,key) in cities" :key="key" :ref="key">
                    <div class="list-title">{{key}}</div>
                    <ul class="list-msg">
                        <li class="list-item" v-for="item in val" :key="item.id" @click="changeCityName(item.name)">
                            {{item.name}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import BScroll from "better-scroll";
import { mapMutations } from "vuex";
export default {
  props: ["hotCities", "cities"],
  data() {
    return {
      scroll: ""
    };
  },
  mounted() {
    let container = this.$refs["container"];
    this.scroll = new BScroll(".container");
  },
  methods: {
    changeSort(sortName) {
      //console.log(sortName);
      this.scroll.scrollToElement(this.$refs[sortName][0]);
      console.log(this.$refs[sortName][0]);
    },
    changeCityName(cityName) {
      this.changeCity(cityName);
      this.$router.push("/");
    },
    ...mapMutations(["changeCity"])
  }
};
</script>
<style scoped lang='stylus'>
@import '~css/common.styl';

.container {
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0.88rem;
    background: f5f5f5;
}

.hot-title {
    font-size: 0.24rem;
    color: #212121;
    padding: 0.2rem 0.3rem;
}

.hot-list {
    position: relative;
    background: #fff;
    font-size: 0.28rem;
    overflow: hidden;
    color: #212121;
}

.hot-list::before {
    content: ' ';
    position: absolute;
    height: 100%;
    width: 33.33%;
    left: 33.33%;
    border-left: 0.02rem solid #ddd;
    border-right: 0.02rem solid #ddd;
}

.hot-item {
    position: relative;
    width: 33.33%;
    text-align: center;
    height: 0.9rem;
    line-height: 0.9rem;
    float: left;
    border-bottom: 0.02rem solid #ddd;
}

.sort-title {
    font-size: 0.24rem;
    color: #212121;
    padding: 0.2rem 0.3rem;
}

.sort-list {
    position: relative;
    background: #fff;
    font-size: 0.28rem;
    overflow: hidden;
    color: #212121;
}

.sort-item {
    width: 16.666%;
    text-align: center;
    height: 0.9rem;
    line-height: 0.9rem;
    float: left;
}

.list-title {
    font-size: 0.24rem;
    color: #212121;
    padding: 0.2rem 0.3rem;
}

.list-msg {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.list-msg::before {
    content: ' ';
    border-right: 0.02rem solid #ddd;
    border-left: 0.02rem solid #ddd;
    position: absolute;
    left: 25%;
    width: 25%;
    height: 100%;
}

.list-msg::after {
    content: ' ';
    border-left: 0.02rem solid #ddd;
    position: absolute;
    left: 75%;
    width: 0%;
    height: 100%;
}

.list-item {
    position: relative;
    width: 25%;
    font-size: 0.28rem;
    text-align: center;
    line-height: 0.9rem;
    float: left;
    border-bottom: 0.02rem solid #ddd;
    textOverflow();
}
</style>

